<script setup lang="ts">
import { ref,onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import * as wnnAdmin  from '@/api/wnnAdmin'

var xs:any = ref()
var tableData:any = ref([]);
var check = (select, row) => {
  console.log(select, row);
};
var checkAll = (a) => {
  console.log(a);
};

for (var i = 0; i < 20; i++) {
  tableData.value.push({
    flex: true,
    name: "围墙门禁" + i,
    address: "ISIS-MJ-400",
    xinghao: "Iss20200816",
    weizhi: "A1栋右边地面围墙",
    status: "1",
    data: "300",
    time: "2022-01-23",
  });
}
var tableData0:any = ref([]);
for (var i = 0; i < 20; i++) {
  tableData0.value.push({
    flex: true,
    name: "围墙门禁" + i,
    address: "ISIS-MJ-400",
    xinghao: "Iss20200816",
    weizhi: "A1栋右边地面围墙",
    status: "1",
    data: "300",
    time: "2022-01-23",
  });
}
var tableData1:any = ref([]);
for (var i = 0; i < 20; i++) {
  tableData1.value.push({
    flex: true,
    name: "告警记录" + i,
    address: "ISIS-MJ-400",
    xinghao: "Iss20200816",
    weizhi: "A1栋右边地面围墙",
    status: "1",
    data: "300",
    time: "2022-01-23",
  });
}
var tableData2:any = ref([])
for (var i = 0; i < 20; i++) {
  tableData2.value.push({
    flex: true,
    name: "运维记录" + i,
    address: "ISIS-MJ-400",
    xinghao: "Iss20200816",
    weizhi: "A1栋右边地面围墙",
    status: "1",
    data: "300",
    time: "2022-01-23",
  });
}


var tableData3 = ref([])

var del = () => {
  console.log(1);
};
var add = () => {
  console.log(2);
  xs.value = !xs.value
};
var baocun = (e) => {
  if (e.target.className == 'el-button el-button--primary cha') {
    xs.value = !xs.value
  }
}

//查询
var input1 = ref('')
var input2 = ref('')
var select = ref('')
var find = () => {
  tableData3.value = tableData.value
  tableData.value = tableData.value.filter(item => item.name == input1.value && item.address == input2.value && item.status == select.value)
}

var reverse = () => {
  tableData.value = tableData3.value
}

onMounted(async () => {
  var res:any = await wnnAdmin.origin();
  console.log(res);
});


//设备列表
var getdata = () => {
  console.log(1);
  tableData.value = tableData0.value
}
//告警记录
var warndata = () => {
  console.log(2);
  tableData.value = tableData1.value
}
//运维记录
var movedata = () => {
  console.log(tableData.value);
  console.log(3);
  tableData.value = tableData2.value
  console.log(tableData.value);
}

</script>
<template>
  <div class="tenement_sixth">
    <Header title="组织信息管理" @del="del" @add="add" />
    <!-- <XinZeng v-show="xs" @click="baocun"></XinZeng> -->
    <div class="main">
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <div class="left">
              <span>组织名称：</span>
              <el-input placeholder="请输入组织名称" v-model="input1" />
            </div>

            <div class="right">
              <span>组织类型：</span>
              <el-select placeholder="请选择" v-model="select">
                <el-option label="地区" value="" />
                <el-option label="部门" value="" />
                <el-option label="处室" value="" />
              </el-select>
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun" @click="find">查询</el-button>
              <el-button type="info" plain @click="reverse">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll"
          :keys="['flex', 'name', 'address', 'xinghao', 'weizhi', 'status', 'data', 'time',]"
          :label="['值', '组织名称', '组织类型', '组织编号', '创建时间', '邮箱', '更新操作人', '更新时间',]" :status="['status']">
          <template #status> 正常 </template>
          <template #btn>
            <button>详情</button>
            <button>配置</button>
            <button>删除</button>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.tenement_sixth {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;

    h3 {
      display: flex;
      height: 100%;
      margin-left: 30px;
      font-weight: 600;

      span {
        width: 8px;
        flex: 1;
        background: rgb(94, 128, 234);
        margin-right: 15px;
      }
    }

    .right {
      .add {
        margin-right: 20px;
      }
    }
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;

    .nav {
      height: 200px;
      display: flex;
      flex-direction: column;

      .tab {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        span {
          height: 100%;
          padding: 0 30px;
          font-size: 14px;
        }

        span:hover {
          color: green;
          border-bottom: 1px solid green;
        }
      }

      .kuang {
        flex: 1;
        padding: 30px 0;

        .form {
          border: 1px solid #999;
          border-radius: 8px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          >div {
            display: flex;
            flex: 2;
            margin: 0 20px;
            align-items: center;

            span {
              white-space: nowrap;
              font-size: 14px;
            }
          }

          .btns {
            flex: 1;
            display: flex;
            justify-content: right;

            .chaxun {
              margin-right: 30px;
            }
          }
        }
      }
    }

    .tableBox {
      flex: 1;

      .table {
        text-align: left;

        :deep(td),
        :deep(th) {
          font-weight: 400;
          border: 1px solid #eee;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>


